<template>
  <n-button-group>
    <n-button
      :type="selectValue === checkedValue ? checkedType : defaultType"
      :disabled="disabled"
      ghost
      @click="valueChange(checkedValue)"
    >
      {{ checkedText }}
    </n-button>
    <n-button
      :type="selectValue === uncheckedValue ? uncheckedType : defaultType"
      :disabled="disabled"
      ghost
      @click="valueChange(uncheckedValue)"
    >
      {{ uncheckedText }}
    </n-button>
  </n-button-group>
</template>

<script setup lang="ts" name="ProSwitchButton">
  const emits = defineEmits(['update:value', 'change'])
  const props = defineProps({
    value: [Boolean, String, Number],
    checkedValue: {
      type: [Boolean, String, Number],
      default: true
    },
    uncheckedValue: {
      type: [Boolean, String, Number],
      default: false
    },
    defaultValue: {
      type: [Boolean, String, Number],
      default: undefined
    },
    checkedText: String,
    uncheckedText: String,
    checkedType: {
      type: String,
      default: 'primary'
    },
    uncheckedType: {
      type: String,
      default: 'warning'
    },
    defaultType: {
      type: String,
      default: 'default'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  })

  const selectValue = ref<string | number | boolean | undefined>()

  watchEffect(() => {
    selectValue.value =
      props.value !== undefined ? props.value : props.defaultValue
  })

  const valueChange = (flag) => {
    emits('update:value', flag)
    emits('change', flag)
  }
</script>

<style lang="less" scoped></style>
